* {
    margin: 0;
    padding: 0;
}

body {
    background-color: cadetblue;
}

@ballize: 10px;
@containerSize: 150px;
@n: 36;
@deg: 360deg/@n;
@delay: 4000;

.loading {
    width: @containerSize;
    height: @containerSize;
    margin: auto 50px;
    position: relative;
    border-radius: 50%;

    .dot {
        position: absolute;
        left: 50%;
        top: 50%;
        width: @ballize;
        height: @ballize;
        margin-left: @ballize/2;
        margin-right: @ballize/2;
        perspective: 70px;
        transform-style: preserve-3d;

        &::before,
        &::after {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        &::before {
            background: #000;
            top: -100%;
            animation: moveB @delsy;
        }

        &::after {
            background-color: #fff;
            top: 100%;
            animation: moveW @delsy;
        }
    }
}

.loop(@i) when(@i<=@n) {
    .dot:nth-child(@{i}) {
        transform: rotate(@deg *@i) translateY(-@containerSize/2);

        &::before,
        &::after {
            animation-delay: -@delay / @n * 6 * @i;
        }
    }

    .loop(@i + 1);
}

.loop(1);

@keyframes moveB {
    0% {
        animation-timing-function: ease-in;
    }

    25% {
        transform: translate3d(0, 100%, @ballsize );
        animation-timing-function: ease-out;
    }

    50% {
        transform: translate3d(0, 200%, 0);
        animation-timing-function: ease-in;
    }

    75% {
        transform: translate3d(0, 100%, -@ballsize );
        animation-timing-function: ease-out;
    }
}

@keyframes moveW {
    0% {
        animation-timing-function: ease-in;
    }

    25% {
        transform: translate3d(0, -100%, -@ballsize );
        animation-timing-function: ease-out;
    }

    50% {
        transform: translate3d(0, -200%, 0);
        animation-timing-function: ease-in;
    }

    75% {
        transform: translate3d(0, -100%, @ballsize );
        animation-timing-function: ease-out;
    }
}